<script setup lang='ts'>
import { ref } from 'vue'
//引入路由
import { useRoute, useRouter } from "vue-router"

//引入图标
import { ArrowRight, FullScreen, Refresh, Setting } from '@element-plus/icons-vue'
//引入仓库
import { sliderFoldStore } from "@/stores/modules/sliderFold"
import { store } from "@/stores/modules/user"
let userStore = store();
let sliderstore = sliderFoldStore();
//切换扩展与折叠图标
const expand = () => {
    sliderstore.foldStatus = !sliderstore.foldStatus
}
//全屏模式
const fullScreen = () => {
    !document.fullscreenElement ? document.documentElement.requestFullscreen() : document.exitFullscreen();
}
//$router.matched 匹配路由的path
const $route = useRoute();
//刷新的函数
const ReFresh = () => {
    sliderstore.toRefsh = !sliderstore.toRefsh
}
//退出登录
let $router = useRouter();
const outLogin = () => {
    //1.需要向服务器发请求
    //2.清除仓库和localStorage的数据
    //3.跳转到登陆页面

    userStore.userOutLogin();
    $router.push({ path: "/login", query: { redirect: $route.path } })
}
//设置主题的抽屉
let drawer = ref<boolean>(false)
//暗黑模式的开关
const changeSwitch = ref(false)
//设置暗黑模式的函数
const changeBlock= (data: boolean) => {
    let html = document.documentElement;

    data ? html.className = 'dark' : html.className = ''
}
//选项绑定的颜色
const color = ref('rgba(255, 69, 0, 0.68)')
//预定义颜色
const predefineColors = ref([
    '#ff4500',
    '#ff8c00',
    '#ffd700',
    '#90ee90',
    '#00ced1',
    '#1e90ff',
    '#c71585',
    'rgba(255, 69, 0, 0.68)',
    'rgb(255, 120, 0)',
    'hsv(51, 100, 98)',
    'hsva(120, 40, 94, 0.5)',
    'hsl(181, 100%, 37%)',
    'hsla(209, 100%, 56%, 0.73)',
    '#c7158577',
])
//改变主题颜色
const changeTheam = (color:string)=>{
    //获取根节点
    const html = document.documentElement
    //修改主题样式
    html.style.setProperty('--el-color-primary', color)
}
</script>

<template>
    <div class="top-container">
        <div class="tabber-left">
            <el-icon @click="expand" class="incoYang">
                <component :is="sliderstore.foldStatus ? 'Expand' : 'Fold'"></component>
            </el-icon>
            <el-breadcrumb :separator-icon="ArrowRight">
                <el-breadcrumb-item v-for="(item, index) in $route.matched" :key="index" :to="item.path"
                    v-show="item.meta.title">
                    <span>{{ item.meta.title }}</span>
                </el-breadcrumb-item>

            </el-breadcrumb>
        </div>
        <div class="tabber-right">
            <el-button :icon="FullScreen" circle @click="fullScreen"></el-button>
            <el-button :icon="Refresh" circle @click="ReFresh"></el-button>
            <el-button :icon="Setting" circle @click="drawer = true"></el-button>
            <img :src="userStore.headFace" alt="" style="width:32px;height:32px;border-radius: 50%;margin-left: 12px">
            <el-dropdown>
                <span class="el-dropdown-link">
                    {{ userStore.netName }}
                    <el-icon>
                        <arrow-down />
                    </el-icon>
                </span>
                <template #dropdown>
                    <el-dropdown-menu>
                        <el-dropdown-item @click="outLogin">退出登录</el-dropdown-item>
                    </el-dropdown-menu>
                </template>
            </el-dropdown>
        </div>
        <el-drawer v-model="drawer" title="I am the title" :with-header="false">
          
            <span >主题设置</span>
            <el-form style="margin-top: 18px;">
                <el-form-item>
                    <span style="margin-right: 295px;">主题颜色</span>
                    <el-color-picker  v-model="color" show-alpha :predefine="predefineColors"
                        size="default" @change="changeTheam(color)"/>
                </el-form-item>
                <el-form-item>
                    <span style="margin-right: 256px;">暗黑模式</span>
                    <el-switch v-model='changeSwitch' class="mt-2" style="margin-left: 24px" inline-prompt
                        active-icon="Moon" inactive-icon="Sunny" @change="changeBlock(changeSwitch)" size="large" />
                </el-form-item>
            </el-form>
        </el-drawer>

    </div>
</template>

<style lang="less" scoped>
.top-container {
    height: 100%;
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: #fdfdfd;
    border: 1px solid black;
    box-shadow: 0px 0px 6px 2px rgba(0, 0, 0, 0.5);

    .tabber-left {
        display: flex;

        .incoYang {
            margin-right: 12px;
            margin-left: 12px;
        }
    }

    .tabber-right {
        display: flex;

        .el-dropdown-link {
            cursor: pointer;
            margin-right: 12px;
            margin-left: 12px;
            display: flex;
            outline: none;
            align-items: center;
        }
    }
}
</style>